<template>
    <div class="scenario-detail-page">
        <van-nav-bar title="Scenario Details" left-text="Back" left-arrow @click-left="$router.back()" />

        <div v-if="scenario" class="scenario-content">
            <!-- Scenario Header -->
            <div class="scenario-header">
                <div class="scenario-image">
                    <img :src="scenario.image" :alt="scenario.title" />
                </div>
                <div class="scenario-info">
                    <h1 class="scenario-title">{{ scenario.title }}</h1>
                    <div class="scenario-meta">
                        <van-tag :type="getDifficultyColor(scenario.difficulty) as any">
                            {{ scenario.difficulty }}
                        </van-tag>
                        <span class="scenario-duration">{{ scenario.duration }} min</span>
                    </div>
                    <p class="scenario-description">{{ scenario.description }}</p>
                </div>
            </div>

            <!-- Scenario Stats -->
            <div class="scenario-stats">
                <div class="stat-item">
                    <van-icon name="play-circle-o" />
                    <div class="stat-info">
                        <div class="stat-number">{{ scenario.completions }}</div>
                        <div class="stat-label">Completions</div>
                    </div>
                </div>
                <div class="stat-item">
                    <van-icon name="star-o" />
                    <div class="stat-info">
                        <div class="stat-number">{{ scenario.rating }}</div>
                        <div class="stat-label">Rating</div>
                    </div>
                </div>
                <div class="stat-item">
                    <van-icon name="clock-o" />
                    <div class="stat-info">
                        <div class="stat-number">{{ scenario.avgDuration }}</div>
                        <div class="stat-label">Avg Time</div>
                    </div>
                </div>
            </div>

            <!-- Learning Objectives -->
            <div class="learning-objectives">
                <h3>Learning Objectives</h3>
                <ul>
                    <li v-for="objective in scenario.objectives" :key="objective">
                        {{ objective }}
                    </li>
                </ul>
            </div>

            <!-- Skills Practiced -->
            <div class="skills-section">
                <h3>Skills You'll Practice</h3>
                <div class="skills-list">
                    <van-tag v-for="skill in scenario.skills" :key="skill" type="primary" plain>
                        {{ skill }}
                    </van-tag>
                </div>
            </div>

            <!-- Scenario Preview -->
            <div class="scenario-preview">
                <h3>What to Expect</h3>
                <div class="preview-content">
                    <div class="preview-item">
                        <van-icon name="user-o" />
                        <div class="preview-info">
                            <div class="preview-title">Your Role</div>
                            <div class="preview-desc">{{ scenario.userRole }}</div>
                        </div>
                    </div>
                    <div class="preview-item">
                        <van-icon name="chat-o" />
                        <div class="preview-info">
                            <div class="preview-title">Conversation Style</div>
                            <div class="preview-desc">{{ scenario.conversationStyle }}</div>
                        </div>
                    </div>
                    <div class="preview-item">
                        <van-icon name="flag-o" />
                        <div class="preview-info">
                            <div class="preview-title">Success Criteria</div>
                            <div class="preview-desc">{{ scenario.successCriteria }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="action-buttons">
                <van-button type="primary" size="large" block @click="startScenario">
                    Start Training
                </van-button>
                <van-button type="default" size="large" block @click="addToFavorites">
                    <van-icon name="star-o" />
                    Add to Favorites
                </van-button>
            </div>
        </div>

        <div v-else class="loading-state">
            <van-loading size="24px" vertical>Loading scenario...</van-loading>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()

interface Scenario {
    id: string
    title: string
    description: string
    image: string
    difficulty: string
    duration: number
    completions: number
    rating: number
    avgDuration: string
    objectives: string[]
    skills: string[]
    userRole: string
    conversationStyle: string
    successCriteria: string
}

const scenario = ref<Scenario | null>(null)

// Mock scenario data
const mockScenarios: Record<string, Scenario> = {
    '1': {
        id: '1',
        title: 'Job Interview - Software Developer',
        description: 'Practice answering common technical and behavioral questions in a software developer interview setting.',
        image: '/api/placeholder/400/200',
        difficulty: 'Intermediate',
        duration: 15,
        completions: 1247,
        rating: 4.8,
        avgDuration: '12 min',
        objectives: [
            'Answer technical questions confidently',
            'Demonstrate problem-solving skills',
            'Show enthusiasm for the role',
            'Ask thoughtful questions about the company'
        ],
        skills: ['Communication', 'Confidence', 'Technical Presentation'],
        userRole: 'Job candidate applying for a software developer position',
        conversationStyle: 'Professional interview format with technical and behavioral questions',
        successCriteria: 'Clear answers, good eye contact, and engaging follow-up questions'
    },
    '2': {
        id: '2',
        title: 'Networking Event Conversation',
        description: 'Learn to initiate and maintain conversations at professional networking events.',
        image: '/api/placeholder/400/200',
        difficulty: 'Beginner',
        duration: 10,
        completions: 892,
        rating: 4.6,
        avgDuration: '8 min',
        objectives: [
            'Start conversations naturally',
            'Find common ground with strangers',
            'Exchange contact information professionally',
            'Leave conversations gracefully'
        ],
        skills: ['Social Skills', 'Networking', 'Small Talk'],
        userRole: 'Professional attending a networking event',
        conversationStyle: 'Casual but professional conversations with multiple people',
        successCriteria: 'Natural conversation flow and meaningful connections made'
    }
}

const getDifficultyColor = (difficulty: string) => {
    const colorMap: Record<string, string> = {
        'Beginner': 'success',
        'Intermediate': 'warning',
        'Advanced': 'danger'
    }
    return colorMap[difficulty] || 'default'
}

const startScenario = () => {
    if (scenario.value) {
        router.push({
            name: 'ScenarioSelect',
            query: { scenarioId: scenario.value.id }
        })
    }
}

const addToFavorites = () => {
    showToast('Added to favorites!')
}

onMounted(() => {
    const scenarioId = route.params.scenarioId as string
    scenario.value = mockScenarios[scenarioId] || null

    if (!scenario.value) {
        showToast('Scenario not found')
        router.back()
    }
})
</script>

<style lang="scss" scoped>
.scenario-detail-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.scenario-content {
    padding: 16px;
}

.scenario-header {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;

    .scenario-image {
        width: 100%;
        height: 200px;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 16px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .scenario-title {
        font-size: 24px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 12px 0;
    }

    .scenario-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .scenario-duration {
            font-size: 14px;
            color: #969799;
        }
    }

    .scenario-description {
        font-size: 16px;
        color: #646566;
        line-height: 1.5;
        margin: 0;
    }
}

.scenario-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;

    .stat-item {
        background: white;
        border-radius: 12px;
        padding: 16px;
        text-align: center;

        .van-icon {
            font-size: 24px;
            color: #1989fa;
            margin-bottom: 8px;
        }

        .stat-number {
            font-size: 20px;
            font-weight: 600;
            color: #323233;
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 12px;
            color: #969799;
        }
    }
}

.learning-objectives,
.skills-section,
.scenario-preview {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;

    h3 {
        font-size: 18px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 16px 0;
    }
}

.learning-objectives {
    ul {
        margin: 0;
        padding-left: 20px;

        li {
            font-size: 16px;
            color: #646566;
            line-height: 1.5;
            margin-bottom: 8px;
        }
    }
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preview-content {
    .preview-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }

        .van-icon {
            font-size: 20px;
            color: #1989fa;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .preview-info {
            flex: 1;

            .preview-title {
                font-size: 16px;
                font-weight: 500;
                color: #323233;
                margin-bottom: 4px;
            }

            .preview-desc {
                font-size: 14px;
                color: #646566;
                line-height: 1.4;
            }
        }
    }
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
</style>